<template>
  <!-- 商品列表页 -->
  <div>
    <!-- 顶部 -->
    <Top></Top>

    <!-- 导航栏 -->
    <Header></Header>
      <el-row>
        <!--span:指占多少栏   offset:偏移量，向右偏移几栏 -->
        <el-col :span="16" :offset="4">
          <!-- 等于把父级栏，又拆分成24栏 gutter:每栏的间隔 -->
          <el-row :gutter="20">
            <el-col :span="6" v-for="(goods,index) in goodsList" :key="index" style="height: 300px">
              <router-link :to="'/goodsDetail/' + goods.id" tag="a">
                <img :src="$imgPrefix + goods.image" alt="">
              </router-link>            
              <p>{{goods.name}}</p>
              <p>价格：{{goods.price}}</p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    <!-- 底部 -->
    <Foot></Foot>
  </div>
</template>


<script>
//导入子组件
import Top from './commons/top.vue'
import Header from './commons/header.vue'
import Foot from './commons/foot.vue'

export default{
  data(){
    return{
      cid: this.$route.params.cid,
      goodsList: [],
    }

  },
  components:{//注册组件
    Top,Header,Foot
  },
  mounted(){//在页面挂载时执行的方法
    console.log("-----")
    //发送请求：查询对应品类的商品信息
    this.$axios.get("/goods/findGoodsByCid/" + this.cid).then(res=>{
      console.log(res)
      //将商品返回的数据赋值到前端展示页面
      this.goodsList = res.data.data
    })

  }
 
}
</script>

<style scoped>
p{
  overflow: hidden; /**超出<p>的内容被隐藏 */
  text-overflow: ellipsis;/**溢出文本以省略号的形式展示（ellipsis：……） */
  -webkit-line-clamp: 2;/*限制文本显示的行数，2行 */
  word-wrap: break-word;/**单词过长时强制转换，以便完全显示在容器中 */
  display: -webkit-box;/**弹性贺子珍布局控制元素的显示方式 */
  -webkit-box-orient: vertical;/**文本垂直方向显示 */
  margin-top: 6px;
}

</style>